<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
    <head>        
    	<title>Contact List</title>        
        <meta name="viewport" content="width=device-width,initial-scale=1">                
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />				
    </head>
    
<body>             
        <!-- Page Index -->                
        <section data-role="page" id="index" >  
        	<div data-role="header" style="text-align:center;" data-nobackbtn="true" data-position="fixed">    
        	<h1><s:text name="global.contactList"/></h1>          	               	 
            	    <!-- select data-inline="true" name= "selectVerifyType" id="selectVerifyType">
                           <option value= "mobile">All Contact List</option>
                           <option value= "email">My Favourite List</option>                                
                           <option value= "email">Recent View List</option>
                    </select  -->                            
        	</div>              
        	<div data-role="content" id="scroller" style="padding:0px;">                                                       
               <ul id="contactlistView" data-role="listview" data-inset="true" data-filter="false" data-divider-theme="a" style="margin:0px;">
　				 <li id="A" style="display:none;" data-role="list-divider">A</li>				 						 		 
				 <li id="B" style="display:none;" data-role="list-divider">B</li>				 
				 <li id="C" style="display:none;" data-role="list-divider">C</li>
				 <li id="D" style="display:none;" data-role="list-divider">D</li>
				 <li id="E" style="display:none;" data-role="list-divider">E</li>
				 <li id="F" style="display:none;" data-role="list-divider">F</li>
				 <li id="G" style="display:none;" data-role="list-divider">G</li>
				 <li id="H" style="display:none;" data-role="list-divider">H</li>
				 <li id="I" style="display:none;" data-role="list-divider">I</li>
				 <li id="J" style="display:none;" data-role="list-divider">J</li>
				 <li id="K" style="display:none;" data-role="list-divider">K</li>
				 <li id="L" style="display:none;" data-role="list-divider">L</li>
				 <li id="M" style="display:none;" data-role="list-divider">M</li>
				 <li id="N" style="display:none;" data-role="list-divider">N</li>
				 <li id="O" style="display:none;" data-role="list-divider">O</li>
				 <li id="P" style="display:none;" data-role="list-divider">P</li>
				 <li id="Q" style="display:none;" data-role="list-divider">Q</li>
				 <li id="R" style="display:none;" data-role="list-divider">R</li>
				 <li id="S" style="display:none;" data-role="list-divider">S</li>
				 <li id="T" style="display:none;" data-role="list-divider">T</li>
				 <li id="U" style="display:none;" data-role="list-divider">U</li>
				 <li id="V" style="display:none;" data-role="list-divider">V</li>
				 <li id="W" style="display:none;" data-role="list-divider">W</li>
				 <li id="X" style="display:none;" data-role="list-divider">X</li>
				 <li id="Y" style="display:none;" data-role="list-divider">Y</li>
				 <li id="Z" style="display:none;" data-role="list-divider">Z</li>				  			
			  </ul>                                                       
            </div>                        
            <div data-role="footer" id="footer" data-position="fixed">  
              <div data-role="navbar">  
                <ul>  
                    <li><a href="#" data-role="button" data-icon="home" data-iconpos="top" data-transition="slide">Home</a></li>  
                    <li><a href="linkAction!myself" data-role="button" data-icon="person">Myself</a></li>  
                    <li><a href="linkAction!message" data-role="button" data-icon="alert">Message</a></li>                        
                    <li><a href="linkAction!more" data-role="button" data-icon="grid">More</a></li>  
                </ul>  
              </div>  
            </div>          
        </section>  
        
        <!-- Page Verify --> 
	<section data-role="page" id="verify">
            <div data-role="header" data-position="fixed"><h1>Verify Identity</h1></div>
            <div data-role="content" style="margin-top:50px;">              
              <label for="selectVerifyType" class="select" style="display:block;font-family:Helvetica,Arial,sans-serif;color:black;font-weight:bold;font-size:23px;text-shadow: 0 1px 0 white;">NetCode Email required:</label>								
				<div style="display:inline-block;">
				 <input type="email" id="emailTextId" value="Enter your company email" style="width:200px;margin-top:20px;"/>
				</div>
				<div style="display:inline-block;">
				 <button id="netCodeBtnId" type="button" data-inline="true" data-theme="a">Get NetCode</button>
				</div>
				<p></p>
				<div style="display:inline-block;">		
				<input type="text" id="netCodeTextId" value="Enter your NetCode" style="width:180px;margin-top:20px;"/>
				</div>
				<div style="display:inline-block;">
				  <button id="verifyBtnId" type="button" data-inline="true" data-theme="a">verify</button>
				</div>
				<p style="margin-top:20px;">
				  ** For first time using, we require you to enter a NetCode sent to your Email to continue.
				</p>				
				<fieldset class="ui-grid-a">
					<div class="ui-block-a"><button id="cancel" type="button" data-theme="d">Quit</button></div>									  					
	            </fieldset>
            </div>
        </section>       				

  
  		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>		         	    	    	      	    	    
	  	<script type="text/javascript" src="js/contact.js"></script>
		<script type="text/javascript">			
			$(document).bind("mobileinit", function(){
				$.mobile.defaultPageTransition = 'slide';							
			});	
			
			$('#index').bind('pageshow', function(event) {
				//if(cookie.getCookie("identity")) {			    	
			    	contactList.loadContactList();	
		       // } else {
		        //	window.location.href = '#verify';
		       // 	verify.elementBinding();		        		        	
		       // }
			});
			
			$('#contactDetail').live('pageshow', function(event) {				
				var id = getUrlVars()["id"];								
				contactDetail.loadContactDetail(id);
			});
			
			
			$('#more').live('pageshow', function(event) {
				var lang = cookie.getCookie("language");				
				if (lang != null ) {					
					$("#languageId option[value='"+lang+"']").attr("selected", "selected");
					$("#languageId").selectmenu("refresh", true);
				}	
				
				$('#languageId').change(function() {
					$("#languageId option:selected").each(function () {						
						language.chooseLanguage($(this).val());
						cookie.setCookie("language", $(this).val());
				  	});					
	        	});
			});
								           	        		      
															
		</script>		
		<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>		
		
    </body>
</html>